<template>
  <div>
    <zck-header></zck-header>
    <div class="slideshow">
      <img :src="pic" alt="" />
    </div>
    <!-- 三楼PTE在线练习 -->
    <div class="card">
      <div class="card-for">
        <h3>PTE在线练习</h3>
        <p>高效、便捷、快速提高听说读写能力,口语AI评分,读的多,不如读的对...</p>
        <ul>
          <li>
            <div class="card-1">
              <p>口语</p>
              <a href="">去练习 &nbsp;</a>
              <div class="img-1">
                <img src="../assets/image/card-1.png" alt="" />
              </div>
              <img src="../assets/image/card.png" alt="" />
            </div>
          </li>
          <li>
            <div class="card-2">
              <p>写作</p>
              <a href="">去练习</a>
              <div class="img-2">
                <img src="../assets/image/card-2.png" alt="" />
              </div>
              <img src="../assets/image/card.png" alt="" />
            </div>
          </li>
          <li>
            <div class="card-3">
              <p>阅读</p>
              <a href="">去练习</a>
              <div class="img-3">
                <img src="../assets/image/card-3.png" alt="" />
              </div>
              <img src="../assets/image/card.png" alt="" />
            </div>
          </li>
          <li>
            <div class="card-4">
              <p>听力</p>
              <a href="">去练习</a>
              <div class="img-4">
                <img src="../assets/image/card-4.png" alt="" />
              </div>
              <img src="../assets/image/card.png" alt="" />
            </div>
          </li>
        </ul>
      </div>
      <!-- 左右两侧大数据 -->
      <div class="box">
        <div class="box-left">
          <div class="left-w">
            <h3>真题预测大数据</h3>
            <span>每周时时数据更新</span>
          </div>
          <ul>
            <li class="left-1">
              <span>942</span>
              <p>预测高频</p>
            </li>
            <li class="left-2">
              <span>876</span>
              <p>极高频</p>
            </li>
            <li class="left-3">
              <span>7566</span>
              <p>总题数</p>
            </li>
            <li class="left-4">
              <span>10</span>
              <p>重回</p>
            </li>
            <li class="left-5">
              <span>3</span>
              <p>新题</p>
            </li>
            <li class="left-6">
              <span>90%</span>
              <p>命中率</p>
            </li>
          </ul>
        </div>
        <div class="box-right">
          <div class="right-w">
            <h3>高分经验分享</h3>
          </div>
          <ul>
            <li>
              <img src="../assets/image/user-logo.png" alt="" />
              <p>Bobby 79炸的Bobby,超优秀课代表作业，快来领取</p>
              <a href="">详情></a>
            </li>
            <li>
              <img src="../assets/image/user-logo.png" alt="" />
              <p>Lily 四项90的Kelly,RS开口就懵要怎么开始练习</p>
              <a href="">详情></a>
            </li>
            <li>
              <img src="../assets/image/user-logo.png" alt="" />
              <p>Bill 首战九炸的Bill,多做模考查漏补缺,高效又省钱</p>
              <a href="">详情></a>
            </li>
            <li>
              <img src="../assets/image/user-logo.png" alt="" />
              <p>Daisy 不管多少遍,坚持练到考前就对</p>
              <a href="">详情></a>
            </li>
            <li>
              <img src="../assets/image/user-logo.png" alt="" />
              <p>Judy 高分八炸的Judy,这个RS笔记法也许你也能参考</p>
              <a href="">详情></a>
            </li>
          </ul>
        </div>
      </div>
      <!-- 左右两侧模考 -->
      <div class="card-lr">
        <div class="card-left">
          <div class="left-p">
            <h3>PTE口语模考</h3>
            <p>真实考试流程 AI成绩评定 经典萤火虫9件套 附加自选题目模式</p>
            <button>开始模考</button>
          </div>
          <div class="left-img">
            <img src="../assets/image/estimate-left.png" alt="" />
          </div>
        </div>
        <div class="card-right">
          <div class="right-p">
            <h3>了解PTE</h3>
            <p>PTE学术英语考试,英文名称Pearson Test of English Academic...</p>
            <button>了解详情</button>
          </div>
          <div class="left-img">
            <img src="../assets/image/estimate-right.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 手机ap模块 -->
    <div class="app">
      <div class="text-left">
        <h3>萤火虫APP - 智能评分 把关练习效果</h3>
        <dl>
          <li>模拟考试系统的练习模式</li>
          <li>无限接近于官方的AI测评体系</li>
          <li>名师真题解析小课堂</li>
          <li>萤火虫独创</li>
          <li>“训练营”提分计划</li>
          <li>精听跟读“随身播放器”</li>
        </dl>
        <button>立即下载</button>
      </div>
      <div class="img-left">
        <img src="../assets/image/app-phone.png" alt="" />
      </div>
    </div>
    <!-- 视频模块 -->
    <div class="vdio">
      <div class="vdio-top">
        <a href=""><h3>PTE入门讲解</h3></a>
        <a href=""><h3>名师公开课</h3></a>

        <div class="top-btn">
          <ul>
            <li>口语</li>
            <li>写作</li>
            <li>阅读</li>
            <li>听力</li>
          </ul>
        </div>
      </div>
      <div class="vdio-lr">
        <div class="vdio-left">
          <video src="../assets/image/vedio.mp4" controls></video>
        </div>
        <div class="vdio-right">
          <ul>
            <li>
              <a href="">
                <span>Read Aloud 题型介绍</span>
                <p>
                  题型介绍
                  本题型是口语的第一道题，也是整场考试的第一道题。考试会随
                </p>
              </a>
            </li>
            <li>
              <a href="">
                <span>Repeat Sentence 题型介绍</span>
                <p>
                  题型介绍
                  本题型是口语的第二道题，也是整场考试“技术难度”最高的第一道题。考
                </p>
              </a>
            </li>
            <li>
              <a href="">
                <span>Describe Image 题型介绍</span>
                <p>
                  题型介绍
                  本题型是口语的第三道题，也是整场考试模版题的代表题目。考试会随
                </p>
              </a>
            </li>
            <li>
              <a href="">
                <span>Read Aloud 题型介绍</span>
                <p>
                  题型介绍 本题型是口语的第四道题,与Describe
                  Image一样,也是一道模版
                </p>
              </a>
            </li>
            <li>
              <a href="">
                <span>Answer Short Questions 题型介绍</span>
                <p>
                  题型介绍
                  本题型是口语的最后一道题，是一道对词汇积累要求很高的题目，俗话说
                </p>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 微博模块 -->
    <div class="email">
      <div class="email-title">
        <h3>萤火虫印象</h3>
        <span>我们的口碑——由你创造</span>
      </div>
      <div class="eamil-z">
        <div class="email-left">
          <a href="">微博好评</a>
          <a href="">谷歌好评</a>
          <p>
            认真做教研 细心做培训<br />
            萤火虫的教研内容和授课态度 一直保持着业内超高好评率<br />
            来看看学生对萤火虫的评价吧 我们到底好不好 学生说了才算数
          </p>
          <button>查看详情</button>
        </div>
        <div class="email-right">
          <img src="../assets/image/weibo-good.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 课程模块 -->
    <div class="class">
      <div class="class-card">
        <h3>"萤火虫“提分”课程"</h3>
        <ul>
          <li>
            <div>
              <span>全能保过班</span>
              <p>萤火虫教研组依据权威实验精心制定...</p>
            </div>
            <div class="class-btn">
              <button>咨询课程</button>
              <button>查看详情</button>
            </div>
          </li>
          <li>
            <div>
              <span>进阶保过班</span>
              <p>本课程的核心技巧讲解分为两个部分...</p>
            </div>
            <div class="class-btn">
              <button>咨询课程</button>
              <button>查看详情</button>
            </div>
          </li>
          <li>
            <div>
              <span>1v1 私人订制班</span>
              <p>1v1课程会依据考生当前考试分数和...</p>
            </div>
            <div class="class-btn">
              <button>咨询课程</button>
              <button>查看详情</button>
            </div>
          </li>
          <li>
            <div>
              <span>VIP保过班</span>
              <p>本课程的核心技巧讲解分为三个部分...</p>
            </div>
            <div class="class-btn">
              <button>咨询课程</button>
              <button>查看详情</button>
            </div>
          </li>
          <li>
            <img src="../assets/image/i-1.png" alt="" />
          </li>
          <li>
            <img src="../assets/image/i-1.png" alt="" />
          </li>
        </ul>
      </div>
    </div>
    <!-- 老师模块 -->
    <div class="teacher-team">
      <div class="teacher-bx">
        <div class="team-title">PTE名师界的豪门阵容</div>
        <div class="team-text">
          <div class="text-img">
            <img src="../assets/image/wm-title.png" alt="" />
          </div>
          <div class="text">
            <h3>毕业于“世界百强“的顶级教研团队</h3>
            <div class="text-name">消消</div>
            <div class="text-log">CCO首席教学内容官</div>
            <p>
              作为PTE 初入市场的第一批教研开拓者，高分八炸学生过千；
              同时又以PTE真题预测的首创者的身份,常年活跃在PTE考场测题第一线,为所有PTE考生带来了无限的学习福利。教学风格创新性极强,打破传统授课模式，教学方式独具一格;善于将课堂内容化繁为简,课堂氛围趣味横生,是PTE教育界首屈一指的优质教师。
            </p>
            <div class="text-btn">了解更多>></div>
          </div>
        </div>
      </div>
    </div>
    <div class="teacher">
      <div class="teacher-btn1"></div>
      <div class="teacher-img">
        <img src="../assets/image/wm-2.png" alt="" />
        <img src="../assets/image/wm-3.png" alt="" />
        <img src="../assets/image/wm-4.png" alt="" />
        <img src="../assets/image/wm-5.png" alt="" />
        <img src="../assets/image/wm-6.png" alt="" />
        <img src="../assets/image/wm-7.png" alt="" />
        <img src="../assets/image/wm-8.png" alt="" />
        <img src="../assets/image/wm-9.png" alt="" />
        <img src="../assets/image/wm-10.png" alt="" />
        <img src="../assets/image/wm-11.png" alt="" />
        <img src="../assets/image/wm-12.png" alt="" />
        <img src="../assets/image/wm-13.png" alt="" />
        <img src="../assets/image/wm-14.png" alt="" />
        <img src="../assets/image/wm-16.png" alt="" />
        <img src="../assets/image/wm-17.png" alt="" />
        <img src="../assets/image/wm-18.png" alt="" />
        <!-- <img :src="pic" alt="" /> -->
      </div>
      <div class="teacher-btn2">></div>
    </div>
    <!-- 摩天轮模块 -->
    <div class="rudder">
      <div class="rudder-title">
        <h2>风靡自澳洲的PTE,更适合你始于澳洲的萤火虫,更懂PTE</h2>
        <span></span>
      </div>
      <div class="rudder-radius">
        <div class="radius-mg">
          <div class="mg-q">
            <img src="../assets/image/rudder-radius.png" alt="" />
            <p>萤火虫</p>
            <p>“独门PTE心法”</p>
          </div>
          <div class="radius-01">
            <img src="../assets/image/rudder-1.png" alt="" />
            <p>懒人短句法</p>
          </div>
          <div class="radius-02">
            <img src="../assets/image/rudder-2.png" alt="" />
            <p>懒人短句法</p>
          </div>
          <div class="radius-03">
            <img src="../assets/image/rudder-3.png" alt="" />
            <p>懒人短句法</p>
          </div>
          <div class="radius-04">
            <img src="../assets/image/rudder-4.png" alt="" />
            <p>懒人短句法</p>
          </div>
          <div class="radius-05">
            <img src="../assets/image/rudder-5.png" alt="" />
            <p>懒人短句法</p>
          </div>
          <div class="radius-06">
            <img src="../assets/image/rudder-6.png" alt="" />
            <p>懒人短句法</p>
          </div>
          <div class="radius-07">
            <img src="../assets/image/rudder-7.png" alt="" />
            <p>懒人短句法</p>
          </div>
          <div class="radius-08">
            <img src="../assets/image/rudder-8.png" alt="" />
            <p>懒人短句法</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 教学模块 -->
    <div class="teac-cla">
      <div class="cla-title">
        <h2>"萤火虫Model" 教学体系</h2>
        <span></span>
      </div>
      <div class="title-2">
        <h5>精课堂 重课后</h5>
      </div>
      <div class="box-box">
        <div class="cla-box1">
          <img src="../assets/image/teachingSystem-1.png" alt="" />
          <h5>全面覆盖</h5>
          <p>全面覆盖知识内容体系</p>
        </div>
        <div class="cla-box2">
          <img src="../assets/image/teachingSystem-2.png" alt="" />
          <h5>名师辅导</h5>
          <p>课后名师辅导助真题练习</p>
        </div>
        <div class="cla-box3">
          <img src="../assets/image/teachingSystem-3.png" alt="" />
          <h5>学习跟踪</h5>
          <p>个性化每日学习进度跟踪辅导</p>
        </div>
      </div>
    </div>

    <!-- 萤火虫教研中心 — 教研是核心生命力 -->
    <div class="for-radio">
      <div class="radio-bind">
        <div class="bind-title">
          <h2>萤火虫教研中心 — 教研是核心生命力</h2>
          <span></span>
        </div>
        <div class="bint-title2">“萤火虫 只做权威教研”</div>
        <div class="foot">
          <div class="foot-left">
            <ul>
              <li><button>教研中心</button></li>
              <li><button>教研理念</button></li>
              <li><button>教研会</button></li>
              <li><button>实验</button></li>
            </ul>
          </div>
          <div class="foot-right">
            <h3>“教研中心”的简介</h3>
            <p>
              萤火虫教研中心成立于2017年底,由萤火虫主管老师和金牌讲师团队组建,为萤火虫课程和课后服务体系提供精确的内容支持。教研团队负责解决考生们的“疑难杂症”,并通过真实考试摸清考试评分体系,整理出PTE题型的“最优解”,同时收集高频考试题目,编纂出与考试真题最贴合的练习题。萤火虫教研中心凭借业内首屈一指的教研思维,已经为上万学子输送了最高效的PTE知识。
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 萤火虫教师培训中心 -- 顶级名师兵工厂 -->
    <div class="teach-bin">
      <div class="bin-title">
        <h3>萤火虫教师培训中心 -- 顶级名师兵工厂</h3>
        <span></span>
        <p>用考核与实践 启发教学创新 为萤火虫教学服务输送卓越师资</p>
      </div>
      <!-- 下面内容 -->
      <div class="bin-p">
        <div class="bin-top">
          <div class="bin-top-left">
            <h4>
              <i></i>
              "教师培训体系"的简介
            </h4>
            <p>
              "萤火虫教师培训中心成立于2018年上旬，前期重在；培训和基础教学服务岗位相结合，在实践中；萤火虫教师培训中心不仅仅重视培训中的经验传输，更侧重老师们自发的教学创新，考生口碑中“干货和趣味并存“的萤火虫课堂，就是对教师培训中心的成绩最高的认可。短时间内培训出优秀高质的老师。"
            </p>
          </div>
          <div class="bin-top-right">
            <img src="../assets/image/train-1.png" alt="" />
          </div>
        </div>
        <div class="bin-bot">
          <div class="bin-bot-left">
            <img src="../assets/image/train-2.png" alt="" />
          </div>
          <div class="bin-bot-right">
            <h4>
              <i></i>
              培训理念
              <p>
                “重考核”-
                侧重考核老师们在选拔阶段的表现，以考核结果为诱导，鼓励老师结合培训内容进行教育方法的创新，在萤火虫的课堂上开展设疑启发和引趣启发的教学方法。
              </p>
            </h4>
          </div>
        </div>
      </div>
    </div>
    <zck-footer></zck-footer>
  </div>
</template>



<script>
import myaxios from "@/http/MyAxios";
export default {
  data() {
    return {
      pic: {},
    };
  },
  mounted() {
    let url = "http://127.0.0.1:3000/v1/index/car";
    myaxios.get(url).then((res) => {
      console.log(res);
      this.pic = res.data.data[0].pic;
      // console.log(this.pic[0].pic);
    });
  },
};
</script>



<style lang="scss" scoped>
/* 样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.center {
  width: 100%;
  margin: 0 auto;
}

/* body{
				filter: grayscale(1);
			}  */

ul {
  list-style: none;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
a {
  text-decoration: none;
  color: black;
}

/* 轮播图 */
.slideshow img {
  width: 100%;
  height: 450px;
}
/* Pte在线练习 */
.card {
  width: 1100px;
  margin: 120px auto;
  /* 后期删除 */
  /* height: 850px; */
  /* background-color: #e6e6e6; */
}
.card .card-for > h3 {
  font-size: 30px;
  white-space: normal;
  font-weight: 400;
  border-bottom: 3px solid #cdefe8;
  text-align: left;
  width: 175px;
  padding-bottom: 10px;
}
.card .card-for > p {
  margin: 30px 0 36px;
}
.card ul {
  display: flex;
  justify-content: space-between;
}
.card-1 {
  width: 240px;
  height: 100px;
  background-color: #fef9ef;
  display: flex;
}
.card-1:hover {
  transform: translate(0, -10px);
  transition: transform 0.4s;
}
.card-1 > p {
  color: #141414;
  font-size: 18px;
  padding-top: 20px;
  padding-left: 25px;
}
.card-1 a {
  padding-top: 60px;
  margin-left: -36px;
  box-sizing: border-box;
  color: #15b6a9;
  font-size: 12px;
  font-weight: 400;
  padding-right: 60px;
}
.card-1 .img-1 > img {
  border: none;
  margin-top: 21px;
  margin-right: 60px;
  width: 30px;
  height: 20px;
}
.card-1 {
  position: relative;
}
.card-1 img:last-child {
  position: absolute;
  right: -4px;
  z-index: 2;
  top: -5px;
  width: 50px;
  height: 59px;
}
.card-2 {
  width: 240px;
  height: 100px;
  background-color: #ebf9f3;
  display: flex;
}
.card-2:hover {
  transform: translate(0, -10px);
  transition: transform 0.4s;
}
.card-2 > p {
  color: #141414;
  font-size: 18px;
  padding-top: 20px;
  padding-left: 25px;
}
.card-2 a {
  padding-top: 60px;
  margin-left: -36px;
  box-sizing: border-box;
  color: #15b6a9;
  font-size: 12px;
  font-weight: 400;
  padding-right: 60px;
}
.card-2 .img-2 > img {
  border: none;
  margin-top: 21px;
  margin-right: 60px;
  width: 30px;
  height: 20px;
}
.card-2 {
  position: relative;
}
.card-2 img:last-child {
  position: absolute;
  right: -4px;
  z-index: 2;
  top: -5px;
  width: 50px;
  height: 59px;
}

.card-3 {
  width: 240px;
  height: 100px;
  background-color: #f8f6ff;
  display: flex;
}
.card-3:hover {
  transform: translate(0, -10px);
  transition: transform 0.4s;
}
.card-3 > p {
  color: #141414;
  font-size: 18px;
  padding-top: 20px;
  padding-left: 25px;
}
.card-3 a {
  padding-top: 60px;
  margin-left: -36px;
  box-sizing: border-box;
  color: #15b6a9;
  font-size: 12px;
  font-weight: 400;
  padding-right: 60px;
}
.card-3 .img-3 > img {
  border: none;
  margin-top: 21px;
  margin-right: 60px;
  width: 30px;
  height: 20px;
}
.card-3 {
  position: relative;
}
.card-3 img:last-child {
  position: absolute;
  right: -4px;
  z-index: 2;
  top: -5px;
  width: 50px;
  height: 59px;
}

.card-4 {
  width: 240px;
  height: 100px;
  background-color: #e0edff;
  display: flex;
}
.card-4:hover {
  transform: translate(0, -10px);
  transition: transform 0.4s;
}
.card-4 > p {
  color: #141414;
  font-size: 18px;
  padding-top: 20px;
  padding-left: 25px;
}
.card-4 a {
  padding-top: 60px;
  margin-left: -36px;
  box-sizing: border-box;
  color: #15b6a9;
  font-size: 12px;
  font-weight: 400;
  padding-right: 60px;
}
.card-4 .img-4 > img {
  border: none;
  margin-top: 21px;
  margin-right: 60px;
  width: 30px;
  height: 20px;
}
.card-4 {
  position: relative;
}
.card-4 img:last-child {
  position: absolute;
  right: -4px;
  z-index: 2;
  top: -5px;
  width: 50px;
  height: 59px;
}
.box {
  height: 300px;
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
}
.box .box-left {
  width: 600px;
  height: 300px;
  padding: 20px 30px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 7px;
  box-shadow: 0px 0px 10px 0px;
}
.box .box-left h3 {
  margin-right: 20px;
  font-size: 20px;
  font-weight: 500;
  display: inline-block;
  color: #232323;
}
.left-w {
  width: 530px;
  border-bottom: 1px solid #999;
  padding-bottom: 10px;
}
.box-left ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin: 20px auto;
}
.box-left ul li {
  width: 140px;
  box-sizing: border-box;
  height: 120px;
  text-align: center;
  position: relative;
}
.box-left ul li span {
  color: #141414;
  font-size: 30px;
  margin-bottom: 10px;
  position: absolute;
  top: -5px;
  left: 45px;
}
.box-left ul li p {
  position: absolute;
  top: 40px;
  left: 45px;
  margin-top: 10px;
}
.box-left ul li:nth-child(2) span {
  color: red;
}
.box-left ul li:nth-child(4) p {
  position: absolute;
  left: 47px;
}
.box-left ul li:nth-child(5) span {
  position: absolute;
  left: 61px;
}
.box-left ul li:nth-child(5) p {
  position: absolute;
  left: 55px;
}
.box-left ul li:nth-child(6) p {
  position: absolute;
  left: 50px;
}
.box-left ul li:nth-child(3) p {
  position: absolute;
  left: 56px;
}
.box-left ul li:nth-child(2) p {
  position: absolute;
  left: 48px;
}
.box-left ul li:nth-child(1) p {
  position: absolute;
  left: 40px;
}
.box-left ul li:nth-child(6) span {
  color: red;
}
/* 右侧滚动 */
.box-right {
  width: 450px;
  background-color: #fff;
  border-radius: 7px;
  padding: 20px 30px;
  box-shadow: 0px 0px 10px 0px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.box-right h3 {
  font-size: 20px;
  font-weight: 500;
  display: inline-block;
  color: #232323;
  padding-bottom: 10px;
}
.box-right .right-w {
  width: 380px;
  border-bottom: 1px solid #666;
}

.box-right p {
  font-size: 12px;
  margin-left: 50px;
}
.box-right a {
  font-size: 12px;
  color: #eea812;
  position: absolute;
  right: 50px;
  display: block;
  top: 25px;
  right: 25px;
}
.box-right ul {
  display: inline-block;
  width: 400px;
  box-sizing: border-box;
}
.box-right ul li {
  position: relative;
}
.box-right ul li p {
  position: absolute;
  top: 25px;
}
.box-right ul li img {
  transform: translate(0px, 10px);
}
.card-lr {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
.card-left {
  width: 500px;
  height: 235px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 20px 30px;
  border-radius: 7px;
  box-shadow: 0px 0px 10px 0px;
}
.card-left h3 {
  color: #666;
  font-size: 20px;
}
.card-left p {
  color: #666;
  width: 200px;
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 18px;
}
.card-left button {
  color: #fff;
  background-color: orange;
  border: none;
  width: 100px;
  height: 40px;
  border-radius: 7px;
}
.card-right {
  width: 530px;
  height: 235px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 20px 30px;
  border-radius: 7px;
  box-shadow: 0px 0px 10px 1px;
}
.card-right h3 {
  color: #666;
  font-size: 20px;
}
.card-right p {
  color: #666;
  width: 200px;
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 18px;
}
.card-right button {
  color: #fff;
  background-color: blue;
  border: none;
  width: 100px;
  height: 40px;
  border-radius: 7px;
}
.card-right img {
  margin-top: 20px;
}
/* 手机app模块 */
.app {
  background: url(../assets/image/app-background.png) no-repeat;
  display: flex;
  position: relative;
  flex-wrap: nowrap;
  overflow: hidden;
}
.text-left {
  /* margin: 0px auto; */
  width: 400px;
  position: absolute;
  left: 400px;
}
.text-left h3 {
  color: #666;
  font-size: 22px;
  padding-bottom: 30px;
}
.text-left button {
  width: 120px;
  height: 40px;
  background-image: linear-gradient(90deg, #1ad0b3, #23ccd1),
    linear-gradient(#c3c3c3, #c3c3c3);
  background-blend-mode: normal, normal;
  border-radius: 5px;
  line-height: 40px;
  cursor: pointer;
  text-align: center;
  color: #fff;
  border: none;
  margin-top: 50px;
}
.text-left li {
  line-height: 35px;
  color: #666;
}
.img-left {
  margin-top: 50px;
  margin-left: 880px;
}
.img-left img {
  width: 500px;
  height: 500px;
  margin-top: -100px;
  margin-bottom: 30px;
}
/* 视频板块 */
.vdio {
  height: 530px;
  width: 100%;
  background-color: #fff;
  margin-top: 50px;
  overflow: hidden;
}
.vdio-lr {
  display: flex;
  justify-content: space-between;
  width: 1200px;
  margin: 0 auto;
}

.vdio-left video {
  width: 500px;
  height: 308px;
  margin-top: 35px;
  margin-left: 55px;
}
.vdio-top h3 {
  font-size: 26px;
  color: rgb(44, 62, 80);
  /* display: flex; */
  text-align: center;
  display: inline-block;
  margin-right: 100px;
  box-sizing: border-box;
}
.vdio-top a:first-child h3 {
  border-bottom: 3px solid #67ddea;
  padding-bottom: 10px;
  margin-left: 300px;
}
.top-btn ul {
  display: flex;
  padding-left: 20px;
}
.top-btn ul li {
  border-radius: 18px;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
  margin-right: 24px;
  font-weight: 300;
  text-align: center;
  border: 1px solid #999;
  width: 100px;
  margin-top: 50px;
}
.top-btn ul li:nth-child(1) {
  border: 1px solid rgba(187, 239, 238, 0.3) !important;
  color: #fff;
  background-image: linear-gradient(90deg, #1ad0b3, #23ccd1 100%),
    linear-gradient(#c3c3c3, #c3c3c3);
  margin-left: 280px;
}
.vdio-right {
  padding-left: 120px;
}
.vdio-right ul li a {
  margin-bottom: 20px;
  display: block;
  color: #666;
  font-size: 14px;
  margin-top: 30px;
}
.vdio-right ul li a span {
  color: #333;
}
/* 微博模块 */
.email {
  height: 500px;
  width: 100%;
  background-color: rgb(247, 249, 254);
}
.email-title {
  text-align: center;
}
.email-title h3 {
  padding-top: 30px;
  border-bottom: 3px solid #1fcec3;
  width: 130px;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 10px;
  font-size: 25px;
  color: #333;
}
.email-title span {
  margin-top: 20px;
  display: block;
  color: #666;
  font-size: 20px;
}
.eamil-z {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  /* background-color: pink; */
  margin: 0 auto;
  margin-top: 30px;
}
.email-left {
  width: 350px;
  /* margin: 0 auto; */
  /* background-color: blue; */
}
.email-left a {
  color: #999;
  font-size: 20px;
  margin-right: 40px;
}
.email-left a:nth-child(1) {
  border-bottom: 3px solid #1ad0b3;
  display: inline-block;
  box-sizing: border-box;
  padding-bottom: 5px;
}
.email-left p {
  color: #999;
  margin-top: 30px;
}
.email-left button {
  background-image: linear-gradient(90deg, #1ad0b3, #23ccd1),
    linear-gradient(#000, #000);
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  width: 120px;
  height: 40px;
  border: 0;
  margin-top: 30px;
}
/* 课程模块 */
.class {
  margin-top: 100px;
  /* height: 1000px; */
  background-color: #fff;
}
.class-card ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 1000px;
  margin: 50px auto;
}
.class-card h3 {
  text-align: center;
  color: #666;
  font-size: 25px;
  border-bottom: 4px solid #67ddea;
  width: 260px;
  margin: 0 auto;
  padding-bottom: 20px;
}
.class-card ul li {
  box-shadow: 0 6px 10px 0;
  width: 270px;
  height: 200px;
  border-radius: 3px;
  margin-bottom: 50px;
}
.class-card ul li:nth-child(1) {
  border-radius: 10px;
  width: 270px;
  height: 200px;
  box-shadow: 0 6px 10px 0;
}
.class-card ul li img {
  box-shadow: 0 6px 10px 0;
  width: 270px;
  height: 200px;
}
.class-card ul li:nth-child(1) div:nth-child(1) {
  background: url(../assets/image/blue.png) no-repeat center center;
  background-position: 0px 0px;
  background-size: 100%;
  height: 130px;
}
.class-card ul li:nth-child(2) div:nth-child(1) {
  background: url(../assets/image/green.png) no-repeat center center;
  background-position: 0px 0px;
  background-size: 100%;
  height: 130px;
}
.class-card ul li:nth-child(3) div:nth-child(1) {
  background: url(../assets/image/orange.png) no-repeat center center;
  background-position: 0px 0px;
  background-size: 100%;
  height: 130px;
}
.class-card ul li:nth-child(4) div:nth-child(1) {
  background: url(../assets/image/red.png) no-repeat center center;
  background-position: 0px 0px;
  background-size: 100%;
  height: 130px;
}
.class-card ul li div:nth-child(1) span {
  font-size: 22px;
  color: #fff;
  padding-top: 25px;
  display: block;
  padding-left: 10px;
}
.class-card ul li div:nth-child(1) {
  height: 180px;
}
.class-card ul li div p {
  font-size: 14px;
  color: #fff;
  padding-top: 20px;
  padding-left: 10px;
  box-sizing: border-box;
}
.class-card .class-btn {
  background-color: #fff;
  height: 70px;
  text-align: center;
  line-height: 70px;
}
.class-card .class-btn button {
  background-color: #fff;
  border-radius: 5px;
  border: 0.01rem solid #67d1b7;
  color: #67d1b7;
  width: 100px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
}
.class-card .class-btn button:nth-child(1) {
  color: #fff;
  background-color: #67d1b7;
  margin-right: 20px;
}
/* 老师模块 */
.teacher-team {
  margin: 0 auto;
  width: 100%;
  /* height: 1000px;  */
  /* background-color: pink; */
}
.teacher-bx {
  margin: 0 auto;
}
.team-title {
  font-size: 25px;
  text-align: left;
  width: 250px;
  padding-bottom: 10px;
  padding-top: 50px;
  margin-left: 310px;
  border-bottom: 3px solid #cdefe8;
}
.team-text {
  width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  /* padding-left: 80px; */
  margin-top: 100px;
}
.text-img img {
  width: 240px;
  height: 340px;
  margin-right: 150px;
  margin-left: -25px;
}
.text > h3 {
  font-size: 26px;
  color: #333;
  width: 420px;
  border-bottom: 0.14rem solid rgba(255, 154, 43, 0.3);
  margin-bottom: 30px;
}
.text-name {
  font-size: 20px;
  margin-bottom: 15px;
}
.text-log {
  display: inline-block;
  padding: 0 5px;
  min-height: 20px;
  background-image: linear-gradient(90deg, #ff771d, #ffa630),
    linear-gradient(#fff, #fff);
  border-radius: 0 10px 0 10px;
  color: #fff;
  font-size: 0.14rem;
  text-align: center;
  margin-bottom: 0.26rem;
}
.text > p {
  font-size: 14px;
  width: 500px;
  line-height: 22px;
  margin-top: 15px;
  margin-bottom: 20px;
}
.text-btn {
  height: 30px;
  line-height: 30px;
  background: #fff;
  border: 0.01rem solid #21cdcb;
  border-radius: 0.05rem;
  text-align: center;
  font-size: 0.16rem;
  font-weight: 700;
  color: #21cdcb;
  cursor: pointer;
  width: 90px;
}
.teacher {
  width: 900px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  /* height: 1000px; */
}
.teacher-img {
  margin-top: 50px;
  width: 900px;
}
.teacher-img img {
  border-radius: 50%;
  background-color: #666;
  width: 80px;
  height: 80px;
  margin-right: 20px;
  margin-bottom: 30px;
  box-sizing: border-box;
}
.teacher-btn1 {
  background-color: rgba(30, 206, 192, 0.4);
  border: none;
  outline: 0;
  padding: 0;
  margin: 0;
  height: 36px;
  width: 36px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 50%;
  /* background-color: rgba(31,45,61,.11); */
  color: #fff;
  position: absolute;
  top: 100px;
  left: -60px;
  line-height: 34px;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
}
.teacher-btn2 {
  background-color: rgba(30, 206, 192, 0.4);
  border: none;
  outline: 0;
  padding: 0;
  margin: 0;
  height: 36px;
  width: 36px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 50%;
  color: #fff;
  position: absolute;
  top: 100px;
  right: 20px;
  line-height: 34px;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
}
.teacher-btn2:hover {
  background-color: rgb(1, 247, 202);
}
.teacher-btn1:hover {
  background-color: rgb(1, 247, 202);
}
/* 摩天轮模块 */
.rudder {
  height: 900px;
  background-color: rgb(247, 249, 254);
  /* background-color: blue; */
  /* position: absolute; */
  /* top: 4850px; */
  /* width: 100%; */
}
.rudder-title h2 {
  font-size: 25px;
  /* color: #333; */
  text-align: center;
  padding-top: 60px;
}
/* .rudder-title{
				/* height: 1000px; */
/* margin: 0 auto; 
			}  */
.rudder-title span {
  display: block;
  margin: 0 auto;
  width: 294px;
  height: 6px;
  background-color: #cdefe8;
  margin-top: 20px;
}
.radius-mg {
  position: relative;
  width: 100%;
}
.mg-q {
  position: absolute;
  top: 130px;
  bottom: 0;
  left: 610px;
  border-radius: 50%;
  border: 1px solid rgb(249, 145, 197);
  height: 500px;
  width: 500px;
  padding-top: 50px;
  box-sizing: border-box;
}
.mg-q img {
  position: absolute;
  top: 83px;
  bottom: 0;
  left: 80px;
}
.mg-q p {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 256px;
  left: 160px;
}
.mg-q p:nth-child(2) {
  position: absolute;
  top: 207px;
  left: 217px;
}
.radius-01 {
  left: 765px;
  position: absolute;
  top: 80px;
}
.radius-01 img {
  width: 75px;
  left: 68px;
  top: 6px;
  position: absolute;
}
.radius-01 p {
  width: 75px;
  left: 57px;
  top: -26px;
  width: 100px;
  position: absolute;
  font-size: 20px;
  color: #000;
}
.radius-02 {
  left: 950px;
  position: absolute;
  top: 80px;
}
.radius-02 img {
  width: 90px;
  left: 47px;
  top: 85px;
  position: absolute;
}
.radius-02 p {
  width: 75px;
  left: 147px;
  top: 101px;
  width: 100px;
  position: absolute;
  font-size: 20px;
  color: #000;
}
.radius-03 {
  left: 950px;
  position: absolute;
  top: 80px;
}
.radius-03 img {
  width: 90px;
  left: 115px;
  top: 260px;
  position: absolute;
}
.radius-03 p {
  width: 75px;
  left: 220px;
  top: 280px;
  width: 100px;
  position: absolute;
  font-size: 20px;
  color: #000;
}
.radius-04 {
  left: 950px;
  position: absolute;
  top: 80px;
}
.radius-04 img {
  width: 90px;
  left: 48px;
  top: 426px;
  position: absolute;
}
.radius-04 p {
  width: 75px;
  left: 145px;
  top: 471px;
  width: 100px;
  position: absolute;
  font-size: 20px;
  color: #000;
}
.radius-05 {
  left: 950px;
  position: absolute;
  top: 80px;
}
.radius-05 img {
  width: 80px;
  left: -122px;
  top: 500px;
  position: absolute;
}
.radius-05 p {
  width: 75px;
  left: -127px;
  top: 600px;
  width: 100px;
  position: absolute;
  font-size: 20px;
  color: #000;
}
.radius-06 {
  left: 950px;
  position: absolute;
  top: 80px;
}
.radius-06 img {
  width: 80px;
  left: -309px;
  top: 438px;
  position: absolute;
}
.radius-06 p {
  width: 75px;
  left: -419px;
  top: 475px;
  width: 100px;
  position: absolute;
  font-size: 20px;
  color: #000;
}
.radius-07 {
  left: 950px;
  position: absolute;
  top: 80px;
}
.radius-07 img {
  width: 89px;
  left: -384px;
  top: 261px;
  position: absolute;
}
.radius-07 p {
  width: 75px;
  left: -496px;
  top: 285px;
  width: 100px;
  position: absolute;
  font-size: 20px;
  color: #000;
}
.radius-08 {
  left: 950px;
  position: absolute;
  top: 80px;
}
.radius-08 img {
  width: 89px;
  left: -321px;
  top: 85px;
  position: absolute;
}
.radius-08 p {
  width: 75px;
  left: -438px;
  top: 100px;
  width: 100px;
  position: absolute;
  font-size: 20px;
  color: #000;
}
/* 教学模块 */
.teac-cla {
  background-color: rgb(255, 250, 250);
  height: 590px;
}
.cla-title h2 {
  font-size: 25px;
  /* color: #333; */
  text-align: center;
  padding-top: 60px;
}
.cla-title span {
  display: block;
  margin: 0 auto;
  width: 294px;
  height: 6px;
  background-color: #cdefe8;
  margin-top: 20px;
}
.title-2 {
  font-size: 20px;
  text-align: center;
  margin: 40px 0;
}
.cla-box1 {
  width: 220px;
  height: 320px;
  background-color: #fff;
  box-shadow: -4px 12px 40px 0 rgb(0 0 0 / 4%);
  border-radius: 5px;
}

.cla-box1 h5 {
  font-size: 18px;
}
.cla-box1 h5,
p {
  text-align: center;
  font-size: 14px;
}
.cla-box2 {
  width: 220px;
  height: 320px;
  background-color: #fff;
  box-shadow: -4px 12px 40px 0 rgb(0 0 0 / 4%);
  border-radius: 5px;
}

.cla-box2 > h5,
p {
  text-align: center;
  font-size: 14px;
}
.cla-box3 {
  width: 220px;
  height: 320px;
  background-color: #fff;
  box-shadow: -4px 12px 40px 0 rgb(0 0 0 / 4%);
  border-radius: 5px;
}

.cla-box3 > h5,
p {
  text-align: center;
  font-size: 14px;
}
.box-box {
  display: flex;
  width: 800px;
  justify-content: space-between;
  margin: 0 auto;
}
.cla-box1 h5 {
  font-size: 18px;
  color: #666;
}
.cla-box2 h5 {
  font-size: 18px;
  color: #666;
}
.cla-box3 h5 {
  font-size: 18px;
  color: #666;
}
.box-box h5 {
  margin-top: 20px;
  margin-bottom: 10px;
}
.box-box img {
  margin-top: 20px;
  margin-left: 20px;
  width: 180px;
}
/* 萤火虫广告 */
.for-radio {
  /* margin: 0 auto; */
  background: url(../assets/image/research.png) no-repeat center;
  background-position: 920px 250px;
  background-color: rgb(247, 249, 254);
  background-size: 400px;
}
.radio-bind {
  margin: 0 auto;
  height: 650px;
  width: 1050px;
}
.bind-title h2 {
  padding-top: 70px;
  font-size: 25px;
  text-align: left;
  color: #333;
  padding-top: 60px;
}
.bind-title span {
  display: block;
  width: 415px;
  text-align: left;
  height: 6px;
  background-color: #cdefe8;
  margin-top: 20px;
}
.bint-title2 {
  text-align: center;
  font-size: 24px;
  padding-top: 80px;
  color: #333;
}
.foot {
  /* background-color: red; */
  height: 500px;
  width: 1000px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: 50px;
}
.foot-left {
  width: 300px;
}
.foot-left ul {
  width: 200px;
  margin-top: 20px;
  margin-right: 45px;
  height: 264px;
}
.foot-left ul li button {
  margin-bottom: 30px;
  cursor: pointer;
  width: 150px;
  border: 0;
  height: 48px;
  text-align: right;
  padding-right: 30px;
  font-size: 18px;
  color: #fff;
  background-color: rgb(189, 183, 183);
  border-bottom-left-radius: 200px;
  border-top-left-radius: 200px;
  position: relative;
  left: 70px;
}
.foot-left ul li:nth-child(1) button {
  width: 200px;
  height: 48px;
  background-color: #1ecec0;
  color: #fff;
  text-align: right;
  border: 0;
  line-height: 48px;
  padding-right: 30px;
  border-bottom-left-radius: 200px;
  border-top-left-radius: 200px;
  font-size: 20px;
  position: relative;
  left: 20px;
}
.foot-right {
  border-left: 1px solid black;
  padding-left: 30px;
  width: 700px;
  height: 300px;
}
.foot-right h3 {
  margin-top: 20px;
  color: rgb(70, 68, 68);
  font-size: 24px;
}
.foot-right p {
  height: 200px;
  line-height: 40px;
  font-size: 18px;
  padding-top: 30px;
}
/* 萤火虫教师培训中心 -- 顶级名师兵工厂  */
.teach-bin {
  height: 800px;
  width: 100%;
}
.bin-title h3 {
  padding-top: 80px;
  text-align: center;
  font-size: 28px;
}
.bin-title span {
  display: block;
  margin: 0 auto;
  width: 294px;
  height: 6px;
  background-color: #f7c188;
  margin-top: 20px;
  margin-bottom: 40px;
}
.bin-p {
  width: 850px;
  margin: 0 auto;
}
.bin-top {
  display: flex;
  justify-content: space-between;
}
.bin-top-left {
  width: 400px;
}
.bin-top-left h4 {
  color: #999;
  font-size: 16px;
  padding-left: 20px;
  position: relative;
  padding-bottom: 20px;
}
.bin-top-left h4 i {
  position: absolute;
  top: -4px;
  left: 6px;
  display: inline-block;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-image: linear-gradient(90deg, #f89178, #fdefdd);
  z-index: -1;
}
.bin-top-left p {
  line-height: 30px;
  color: #666;
}
.bin-top-right img {
  width: 350px;
  height: 250px;
  padding-right: 30px;
}
.bin-bot {
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
}
.bin-bot-left img {
  width: 350px;
  padding-left: 30px;
  height: 250px;
}
.bin-bot-right {
  width: 400px;
}
.bin-bot-right h4 {
  color: #999;
  font-size: 16px;
  padding-left: 20px;
  padding-bottom: 20px;
  position: relative;
}
.bin-bot-right i {
  position: absolute;
  top: -4px;
  left: 6px;
  display: inline-block;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-image: linear-gradient(90deg, #f89178, #fdefdd);
  z-index: -1;
}
.bin-bot-right p {
  line-height: 30px;
  color: #666;
}
</style>